<template>
  <div class="w-[1150px] relative bg-white print-style p-6 h-full">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ printData?.printData?.mPrintSet?.title }}</div>
      <BaseBarcode :value="tableData[0]?.thdh" class="w-60 text-right" />
    </div>
    <div class="text-center text-[22px] font-bold">{{ tableData[0]?.status }}</div>

    <div class="flex justify-between items-center mt-5">
      <div class="ml-10">供应商：{{ tableData[0]?.gysmc }}</div>
      <div class="w-[280px]">退货日期：{{ tableData[0]?.thsj }}</div>
    </div>
    <div class="flex justify-between items-center mt-2 border-b border-black">
      <div class="ml-10">确认人：{{ tableData[0]?.qrr }}</div>
      <div class="">退货人：{{ tableData[0]?.thr }}</div>
      <div class="w-[280px]">制单时间：{{ tableData[0]?.createTime }}</div>
    </div>
    <div class="flex-1">
      <div class="">
        <div class="flex flex-wrap border-b border-black text-sm">
          <div class="h-[40px] w-[100px] flex items-center justify-center">药品名称</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">规格</div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">退货数量</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">批号</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">有效期</div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">退货单价</div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">退货金额</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">厂家</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">退货理由</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">原票据号</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">原采购号</div>
        </div>
        <div v-for="item in tableData" :key="item.ph" class="flex text-sm border-b border-dashed border-black">
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.mc }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.gg }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">{{ item.thsl + item.dw }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.ph }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.yxq }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">{{ item.thdj }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">{{ item.thje }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.cj }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.thyy }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.ypjh }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center">{{ item.cgdh }}</div>
        </div>
        <div class="flex text-sm border-t border-black mt-2">
          <div class="h-[40px] w-[100px] flex items-center justify-center">合计：</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">{{ tableData[0]?.hjsl }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
          <div class="h-[40px] w-[100px] flex items-center justify-end">{{ tableData[0]?.hjje }}</div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
          <div class="h-[40px] w-[100px] flex items-center justify-center"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const tableData = ref({})

watch(
  () => props.printData,
  () => {
    if (props.printData.printData.detail.length > 0) {
      tableData.value = props.printData.printData.detail
    }
  }
)
</script>
<style lang="less" scoped>
.table-border {
  @apply border border-solid  p-1;
}
</style>
